{% extends 'app/base.html' %}
{% load i18n sort_by_version staticfiles app_rating app_rating_class humanize %}

{% block head-title %}{{ object.name }} - {% trans 'Apps' %} - {% endblock %}
{% block head %}
    <link rel="stylesheet" href="{% static 'assets/css/img-slider.css' %}" charset="utf-8">
    <link rel="stylesheet" href="{% static 'vendor/github.css' %}" charset="utf-8">
    <script defer src="{% static 'public/app/detail.js' %}" type="text/javascript"></script>
    <meta name="description-url" content="{% url 'app-description' object.id %}">
    <meta name="ratings-url" content="{% url 'app-ratings' object.id %}">
    <meta name="language-code" content="{{ request.LANGUAGE_CODE }}">
    <meta name="fallback-language-code" content="{{ fallbackLang }}">
{% endblock %}

{% block feeds %}
    <link rel="alternate" type="application/atom+xml" title="{% blocktrans with app_name=object.name %}Latest {{ app_name }} releases{% endblocktrans %}" href="{% url 'feeds-releases-atom'%}?app={{ object.id }}" />
    <link rel="alternate" type="application/rss+xml" title="{% blocktrans with app_name=object.name %}Latest {{ app_name }} releases{% endblocktrans %}" href="{% url 'feeds-releases-rss'%}?app={{ object.id }}" />
{% endblock %}

{% block apps %}
    <div class="header-wrap">
        <h1>{{ object.name }}</h1>{% if object.is_featured %}<span class="tag featured">{% trans "Featured" %}</span>{% endif %}
    </div>
    {% if object.screenshots.all %}
        <section id="app-gallery-container">
            <div id="app-gallery" class="carousel slide" data-ride="carousel" data-interval="false">
                <div {% if object.screenshots.all|length < 2 %}hidden{% endif %} class="carousel-controls">
                    <a class="left carousel-control" href="#app-gallery" role="button" data-slide="prev">
                        <span>
                            <span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span>
                            <span class="control-text">{% trans 'Previous' %}</span>
                        </span>
                    </a>
                    <ol class="carousel-indicators">
                        {% for screenshot in object.screenshots.all %}
                            <li data-target="#app-gallery" data-slide-to="{{ forloop.counter0 }}" {% if forloop.first %}class="active"{% endif %}></li>
                        {% endfor %}
                    </ol>
                    <a class="right carousel-control" href="#app-gallery" role="button" data-slide="next">
                        <span>
                            <span class="control-text">{% trans 'Next' %}</span>
                            <span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>
                        </span>
                    </a>
                </div>
                <div class="inner-container">
                    <div class="carousel-inner" role="listbox">
                        {% for screenshot in object.screenshots.all %}
                            <div class="item {% if forloop.first %}active{% endif %}">
                                <img src="{{ screenshot.url }}" alt="{% trans 'Screenshot' %}">
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

        </section>
    {% endif %}
    <div class="app-meta col-md-4">
        <section>
            {% if object.last_release %}
            <h5>{% trans "Updated" %}</h5>
            <p>{{ object.last_release|naturaltime }}</p>
            {% endif %}
            {% if object.owner %}
            <h5>{% trans "Publisher" %}</h5>
            <p>
                {% if object.owner.first_name or object.owner.last_name %}
                    {{ object.owner.first_name }} {{ object.owner.last_name }}
                {% else %}
                    Anonymous
                {% endif %}
            </p>
            {% endif %}
            {% for category in object.categories.all %}
                <h5>{% trans "Category" %}</h5>
                <p>{{ category }}</p>
            {% endfor %}
            <h5>{% trans 'Overall rating' %}</h5>
            <p class="{{ object.rating_overall|app_rating_class }}">{{ object.rating_overall|app_rating }}</p>
            <h5>{% trans 'Recent rating' %}</h5>
            <p class="{{ object.rating_recent|app_rating_class }}">{{ object.rating_recent|app_rating }}</p>
            {% if object.co_maintainers.all %}
            <h5>{% trans "Co-Maintainers" %}</h5>
            <ul class="list-inline">
                {% for a in object.co_maintainers.all %}
                <li>{% if a.get_fullname %}
                    {{ a.get_fullname }}
                    {% else %}
                    {{ a.username }}
                    {% endif %}</li>
                {% endfor %}
            </ul>
            {% endif %}
        </section>
        {% if object.website or object.user_docs or object.admin_docs or object.developer_docs %}
        <section class="resources">
            <h5>{% trans "Resources" %}</h5>
            <ul>
                {% if object.website %}
                <li><a href="{{ object.website }}" rel="noopener noreferrer">{% trans "Homepage" %}</a></li>
                {% endif %}
                {% if object.user_docs %}
                <li><a href="{{ object.user_docs }}" rel="noopener noreferrer">{% trans "User documentation" %}</a></li>
                {% endif %}
                {% if object.admin_docs %}
                <li><a href="{{ object.admin_docs }}" rel="noopener noreferrer">{% trans "Admin documentation" %}</a></li>
                {% endif %}
                {% if object.developer_docs %}
                <li><a href="{{ object.developer_docs }}" rel="noopener noreferrer">{% trans "Developer documentation" %}</a></li>
                {% endif %}
            </ul>
        </section>
        {% endif %}
    </div>
    <section class="app-description markdown loading"></section>
    <div class="row app-download">
        <div class="col-md-12">
            <section>
                <h4 id="downloads">{% trans "Downloads" %}</h4>
                <table class="table">
                    {% for platform_v, releases in latest_releases_by_platform_v|sort_by_version:'desc' %}
                        {% if releases.stable or releases.unstable %}
                            <tr>
                                <td>Nextcloud {{ platform_v }}</td>
                                <td>{% if releases.stable %}<a href="{{ releases.stable.download }}" rel="noopener noreferrer">{{ releases.stable.version }}</a>{% endif %}</td>
                                <td>{% if releases.unstable %}<a href="{{ releases.unstable.download }}" rel="noopener noreferrer" class="unstable">{{ releases.unstable.version }}{% if releases.unstable.is_nightly %} - {% trans 'nightly' %}{% endif %} ({%  trans 'Unstable' %})</a>{% endif %}</td>
                                <td><a href="{% url 'app-releases' object.id %}?platform={{ platform_v }}#{{ platform_v }}">{% trans "All releases" %}</a></td>
                            </tr>
                        {% endif %}
                    {% endfor %}
                </table>
            </section>
        </div>
    </div>
    <div class="row app-comments">
        <ul class="col-md-12">
            <h4 class="section-heading">{% trans 'Discussion' %}</h4>
            {% if object.issue_tracker %}
                <li><a rel="noreferrer noopener"
                       href="{{ object.issue_tracker }}"
                       class="btn btn-primary">{% trans 'Report problem' %}</a>
                </li>
                <li><a rel="noreferrer noopener"
                       href="{{ object.issue_tracker }}"
                       class="btn btn-primary">{% trans 'Request feature' %}</a>
                </li>
            {% endif %}

            <li>
                <a rel="noreferrer noopener"
                   href="{{ object.discussion_url }}"
                   class="btn btn-primary">{% trans 'Ask questions or discuss' %}</a>
            </li>
            {% if request.user.is_authenticated and not user_has_rated_app and request.user != object.owner %}
                <li>
                    <button id="toggle-comment-button" aria-expanded="true"
                            data-toggle="collapse" data-target="#app-ratings"
                            class="btn btn-primary">{% trans 'Rate app' %}</button>
                </li>
            {% endif %}
        </ul>
    </div>
    {% if request.user.is_authenticated and request.user != object.owner %}
        <div class="row app-ratings {% if not user_has_rated_app %}collapse{% endif %}" id="app-ratings">
            <div class="col-md-12">
                <h4 class="section-heading" id="comments">{% trans 'Rate' %}</h4>
                <form action="{% url 'app-detail' object.id %}" method="post">
                    {% csrf_token %}
                    {% include 'form-fields.html' with form=rating_form %}
                    <p class="help-block">
                        {% blocktrans %}Rating comments support <a rel="noopener noreferrer" href="https://daringfireball.net/projects/markdown/syntax">Markdown</a>.
                            Do not use rating comments to report bugs or request features. Neither developers nor users will be notified of your comment.
                            A rating without a comment still counts, but will not be listed below.{% endblocktrans %}
                    </p>
                    {% if rating_form.is_bound %}
                        <input type="submit" value="{% trans 'Update rating' %}" class="btn btn-primary">
                    {% else %}
                        <input type="submit" value="{% trans 'Submit rating' %}" class="btn btn-primary">
                    {% endif %}
                </form>
            </div>
        </div>
    {% endif %}
    <template id="rating-template">
        <div class="row">
            <div class="col-md-12">
                <div class="rating-comment">
                    <header>
                        <div class="date"></div>
                        <div class="author"></div>
                        <div class="rating rating-good">{% trans 'Good' %}</div>
                        <div class="rating rating-ok">{% trans 'Ok' %}</div>
                        <div class="rating rating-bad">{% trans 'Bad' %}</div>
                    </header>
                    <div class="comment"></div>
                </div>
            </div>
        </div>
    </template>
    <template id="no-ratings-template">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                      <p class="text-center lead">{% blocktrans %}No comments found.{% endblocktrans %}</p>
                    </div>
                </div>
            </div>
        </div>
    </template>
    <div class="row">
        <div class="col-md-12">
            <h4 class="section-heading" id="comments">{% trans 'Rating comments' %}</h4>
            <div class="app-rating-language">
                {% if languages %}
                    {% get_language_info_list for languages as languages %}
                    <label for="comment_language">{% blocktrans %}Display ratings comments in:{% endblocktrans %}</label>
                    <select class="form-control" id="comment_language">
                        {% for language in languages %}
                            <option value="{{ language.code }}"{% if language.code == request.LANGUAGE_CODE %} selected="selected"{% endif %}>
                                {{ language.name_local }}
                            </option>
                        {% endfor %}
                    </select>
                {% endif %}
            </div>
        </div>
    </div>
    <div class="app-rating-list loading"></div>

{% endblock %}
